<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Viewer</title>

    <!-- unpkg.com 国内镜像 unpkg.zhimg.com -->

    <!-- vue2 -->
    <script src="../../modules/vue@2/dist/vue.js"></script>

    <!-- 引入网络 -->
    <script src="../../modules/axios-1.1.3/axios-1.1.3.min.js"></script>


    <!-- element-ui -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../modules/element-ui@2.15.13/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../modules/element-ui@2.15.13/lib/index.js"></script>

    <script src="../../modules/echarts@5.5.1/dist/echarts.min.js"></script>

</head>
<body>
<div id="app">
    <div id="chart" style="width:100%;height: 400px;border: solid 1px #aaa">
    </div>
    <el-checkbox v-model="enableNativeOptions" @change="renderChart">使用原生配置</el-checkbox>
    <el-button size="mini" type="primary" @click="onClearLastState">还原默认</el-button>
    <template v-if="enableNativeOptions">
        <el-input v-model="echartOption"
                  @keyup.enter.native="renderChart"
                  type="textarea"
                  :rows="50"
                  @change="renderChart"
                  placeholder="echarts的原生options"></el-input>
    </template>
    <template v-else>
        <el-radio-group v-model="showType" @change="renderChart">
            <el-radio label="line">折线图</el-radio>
            <el-radio label="lineArea">折线-面积图</el-radio>
            <el-radio label="lineStack">折线-堆叠图</el-radio>
            <el-radio label="lineStackArea">折线-堆叠面积图</el-radio>
            <el-radio label="bar">柱状图</el-radio>
            <el-radio label="barPolar">柱状-极坐标图</el-radio>
            <el-radio label="barStack">柱状-堆叠图</el-radio>
            <el-radio label="barPolarStack">柱状-极坐标堆叠图</el-radio>
            <el-radio label="circle">饼图</el-radio>
            <el-radio label="pie">玫瑰图</el-radio>
            <el-radio label="treemap">树图</el-radio>
        </el-radio-group>
        <el-input v-model="echartConfig"
                  @keyup.enter.native="renderChart"
                  type="textarea"
                  :rows="10"
                  @change="renderChart"
                  placeholder="echarts的选项"></el-input>
        <el-checkbox v-model="enableSheetData" @change="renderChart">使用表格数据</el-checkbox>
        <template v-if="enableSheetData">
            <el-checkbox v-model="sheetUseDotSeparator" @change="renderChart">逗号分隔符</el-checkbox>
            <el-checkbox v-model="sheetWithHead" @change="renderChart">包含表头</el-checkbox>
            <el-checkbox v-model="sheetWithName" @change="renderChart">包含行头</el-checkbox>
            <el-button size="mini" type="primary" @click="onUseSheetConfig">使用表格配置</el-button>
            <el-input v-model="sheetData"
                      @keyup.enter.native="renderChart"
                      type="textarea"
                      :rows="50"
                      @change="renderChart"
                      placeholder="echarts的表格数据"></el-input>
        </template>
        <template v-else>
            <el-input v-model="dataList"
                      @keyup.enter.native="renderChart"
                      type="textarea"
                      :rows="50"
                      @change="renderChart"
                      placeholder="echarts的JSON数据"></el-input>
        </template>
    </template>
</div>
</body>
<script>
    // 定义默认的参数
    axios.defaults.headers['Content-Type'] = 'application/json'

    Vue.prototype.$axios = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 30 * 60 * 1000,
        responseType: 'json'
    })

    RegistryEchatsCustomTheme(echarts)
    Vue.prototype.$echarts = echarts

    var app = new Vue({
        el: '#app',
        data: {
            enableNativeOptions: false,
            enableSheetData: false,
            sheetUseDotSeparator: false,
            sheetWithHead: true,
            sheetWithName: true,
            showType: 'line',
            echartOption: '',
            dataList: '',
            sheetData: 'NO\tALL_CNT\tSTATUS_CNT\tVALID_CNT\n' +
                '1\t1125647\t1125647\t742942\n' +
                '2\t1125647\t1125647\t742942\n' +
                '3\t368499\t368499\t131475\n' +
                '4\t168441\t168441\t64974\n' +
                '5\t377410\t377410\t133827\n' +
                '6\t377680\t377680\t133876',
            echartConfig: '',
            defaultOption: {
                title: {
                    text: '统计表',
                    left: 'center'
                },
                legend: {
                    data: ['温度', '湿度'],
                    right: '2%',
                    bottom: '2%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        rotate: -90, // 强制显示所有列名
                    },
                    data: ['1月', '2月', '3月', '4月']
                },
                series: [
                    {
                        name: '温度',
                        type: 'line',
                        data: [12, 18, 7, 14],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ],
                        },
                        markLine: {
                            data: [{type: 'average', name: 'Avg'}]
                        },
                    },
                    {
                        name: '湿度',
                        type: 'line',
                        data: [30, 25, 18, 22],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ],
                        },
                        markLine: {
                            data: [{type: 'average', name: 'Avg'}]
                        },
                    }
                ]
            },
            defaultDataList: [{
                name: '1月',
                weight: 12,
                height: 14,
                rate: 50,
            }, {
                name: '2月',
                weight: 18,
                height: 7,
                rate: 45,
            }, {
                name: '3月',
                weight: 21,
                height: 15,
                rate: 70,
            }],
            defaultConfig: {
                title: '数据预览表',
                name: 'name',
                series: [
                    {name: '温度', prop: 'weight'},
                    {name: '湿度', prop: 'height'},
                    {name: '比率', prop: 'rate'}
                ]
            },
            sheetConfig: {
                name: 'name',
                series: []
            }
        },
        mounted() {
            this.echartOption = JSON.stringify(this.defaultOption, null, '    ')
            this.dataList = JSON.stringify(this.defaultDataList, null, '     ')
            this.echartConfig = JSON.stringify(this.defaultConfig, null, '    ')
            this.onLoadLastState()
            this.renderChart()
        },
        created() {

        },
        methods: {
            onUseSheetConfig() {
                let config = JSON.parse(this.echartConfig)
                config.series = this.sheetConfig.series
                config.name = this.sheetConfig.name
                this.echartConfig = JSON.stringify(config, null, '    ')
                this.renderChart()
            },
            onLoadLastState() {
                let json = localStorage.getItem('data-viewer')
                if (json) {
                    try {
                        let obj = JSON.parse(json)
                        Object.keys(obj).forEach(key => {
                            this[key] = obj[key]
                        })
                    } catch (e) {

                    }
                }
                this.renderChart()
            },
            onClearLastState() {
                localStorage.removeItem('data-viewer')
                window.location.reload()
            },
            getObjectRouteValue(obj, path) {
                if (!path || path == '') {
                    return obj
                }
                let ret = obj
                if (!ret) {
                    return ret
                }
                let arr = path.split('.');
                for (let i = 0; i < arr.length; i++) {
                    let key = arr[i]
                    if (!ret) {
                        return ret
                    }
                    if (key.endsWith(']')) {
                        let idx = key.indexOf('[')
                        let nk = key.substring(idx + 1, key.length - 1)
                        key = key.substring(0, idx)
                        ret = ret[key]
                        if (!ret) {
                            return ret
                        }
                        ret = ret[nk]
                    } else {
                        ret = ret[key]
                    }
                }
                return ret
            },
            parseAsEchartsLineOptions(dataList, config) {

                const echartsConfig = {
                    title: config.title,
                    labels: [],
                    dataMap: {}
                }

                dataList.forEach(item => {
                    if (typeof config.name == 'string') {
                        echartsConfig.labels.push(this.getObjectRouteValue(item, config.name))
                    } else {
                        echartsConfig.labels.push(config.name(item))
                    }

                    for (let i = 0; i < config.series.length; i++) {
                        let key = config.series[i].name
                        let prop = config.series[i].prop
                        if (!echartsConfig.dataMap[key]) {
                            echartsConfig.dataMap[key] = []
                        }
                        if (typeof prop == 'string') {
                            echartsConfig.dataMap[key].push(this.getObjectRouteValue(item, prop))
                        } else {
                            echartsConfig.dataMap[key].push(prop(item))
                        }
                    }
                })


                let series = []

                for (let i = 0; i < config.series.length; i++) {
                    let key = config.series[i].name
                    series.push({
                        name: key,
                        type: 'line',
                        smooth: true,
                        data: echartsConfig.dataMap[key],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ],
                        },
                        markLine: {
                            data: [{type: 'average', name: 'Avg'}]
                        },
                    })
                }

                const options = {
                    title: {
                        text: echartsConfig.title,
                        left: 'center'
                    },
                    legend: {
                        data: Object.keys(echartsConfig.dataMap),
                        right: '2%',
                        bottom: '2%',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            show: true,
                            rotate: -90, // 强制显示所有列名
                        },
                        data: echartsConfig.labels
                    },
                    series: series
                }
                return options
            },
            parseAsEchartsPieOptions(dataList, config) {

                const echartsConfig = {
                    title: config.title,
                    labels: [],
                    dataMap: {}
                }

                dataList.forEach(item => {
                    if (typeof config.name == 'string') {
                        echartsConfig.labels.push(this.getObjectRouteValue(item, config.name))
                    } else {
                        echartsConfig.labels.push(config.name(item))
                    }

                    for (let i = 0; i < config.series.length; i++) {
                        let key = config.series[i].name
                        let prop = config.series[i].prop
                        if (!echartsConfig.dataMap[key]) {
                            echartsConfig.dataMap[key] = []
                        }
                        if (typeof prop == 'string') {
                            echartsConfig.dataMap[key].push(this.getObjectRouteValue(item, prop))
                        } else {
                            echartsConfig.dataMap[key].push(prop(item))
                        }
                    }
                })


                let series = []

                for (let i = 0; i < config.series.length; i++) {
                    let key = config.series[i].name
                    let list = []
                    for (let j = 0; j < echartsConfig.dataMap[key].length; j++) {
                        list.push({
                            value: echartsConfig.dataMap[key][j],
                            name: echartsConfig.labels[j]
                        })
                    }
                    series.push({
                        name: key,
                        type: 'pie',
                        center: [Math.round((i + 0.5) / config.series.length * 100) + '%', '50%'],
                        radius: [30, 150],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: list
                    })
                }

                const options = {
                    title: {
                        text: echartsConfig.title,
                        left: 'center'
                    },
                    legend: {
                        data: Object.keys(echartsConfig.dataMap),
                        top: 'bottom'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: series
                }
                return options
            },
            parseAsEchartsTreemapOptions(dataList, config) {

                const echartsConfig = {
                    title: config.title,
                    labels: [],
                    dataMap: {}
                }

                dataList.forEach(item => {
                    if (typeof config.name == 'string') {
                        echartsConfig.labels.push(this.getObjectRouteValue(item, config.name))
                    } else {
                        echartsConfig.labels.push(config.name(item))
                    }

                    for (let i = 0; i < config.series.length; i++) {
                        let key = config.series[i].name
                        let prop = config.series[i].prop
                        if (!echartsConfig.dataMap[key]) {
                            echartsConfig.dataMap[key] = []
                        }
                        if (typeof prop == 'string') {
                            echartsConfig.dataMap[key].push(this.getObjectRouteValue(item, prop))
                        } else {
                            echartsConfig.dataMap[key].push(prop(item))
                        }
                    }
                })


                let series = []

                for (let i = 0; i < config.series.length; i++) {
                    let key = config.series[i].name
                    let list = []
                    for (let j = 0; j < echartsConfig.dataMap[key].length; j++) {
                        list.push({
                            value: echartsConfig.dataMap[key][j],
                            name: echartsConfig.labels[j]
                        })
                    }
                    series.push({
                        name: key,
                        type: 'treemap',
                        left: Math.round(i / config.series.length * 100) + '%',
                        width: Math.round(95.0 / config.series.length) + '%',
                        data: list
                    })
                }

                const options = {
                    title: {
                        text: echartsConfig.title,
                        left: 'center'
                    },
                    legend: {
                        data: Object.keys(echartsConfig.dataMap),
                        top: 'bottom',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: series
                }
                return options
            },
            setEchartsOption(echartsId, option, callback, clear = false) {
                // 基于准备好的dom，初始化echarts实例
                let _this = this
                let echarts = this.$echarts
                let renderFunc = function (echartsObj) {
                    if (clear) {
                        echartsObj.clear()
                    }
                    echartsObj.setOption(option)
                    if (callback) {
                        callback(echartsObj)
                    }
                }
                let ensureFunc = function () {
                    let echartsObj = null

                    let dom = document.getElementById(echartsId);
                    if (dom != null && dom != undefined) {
                        echartsObj = echarts.init(dom, 'custom')
                    }

                    if (echartsObj == null || echartsObj == undefined) {
                        setTimeout(ensureFunc, 30)
                    } else {
                        if(clear) {
                            echartsObj.dispose()
                            echartsObj = echarts.init(dom, 'custom')
                        }
                        if (echartsObj == null || echartsObj == undefined) {
                            setTimeout(ensureFunc, 30)
                        } else {
                            renderFunc(echartsObj)
                        }
                    }
                }
                ensureFunc()
            },
            renderChart(initial = false) {
                let domId = 'chart'

                if (this.enableNativeOptions) {
                    let option = JSON.parse(this.echartOption)
                    this.setEchartsOption(domId, option, null, true)
                } else {
                    let list = []
                    if (this.enableSheetData) {
                        let text = this.sheetData
                        let lines = text.split('\n')
                        let head = lines[0]
                        let names = head.split(/\s+/)
                        if (this.sheetUseDotSeparator) {
                            names = head.split(/\s*,\s*/)
                        }
                        if (!this.sheetWithHead) {
                            for (let i = 0; i < names.length; i++) {
                                names[i] = 'A' + (i + 1)
                            }
                        }
                        for (let i = (this.sheetWithHead ? 1 : 0); i < lines.length; i++) {
                            let item = {}
                            let line = lines[i]
                            let cols = line.split(/\s+/)
                            if (this.sheetUseDotSeparator) {
                                cols = line.split(/\s*,\s*/)
                            }
                            for (let j = 0; j < names.length; j++) {
                                if (j < cols.length) {
                                    item[names[j]] = parseFloat(cols[j])
                                } else {
                                    item[names[j]] = 0
                                }
                            }
                            list.push(item)
                        }
                        if (this.sheetWithName) {
                            this.sheetConfig.name = names.shift()
                        }
                        this.sheetConfig.series = []
                        for (let i = 0; i < names.length; i++) {
                            this.sheetConfig.series.push({
                                name: names[i],
                                prop: names[i]
                            })
                        }
                    } else {
                        list = JSON.parse(this.dataList)
                    }
                    let option = {}
                    if(this.showType=='treemap'){
                        option = this.parseAsEchartsTreemapOptions(list, JSON.parse(this.echartConfig))
                    } else if (this.showType=='pie') {
                        option = this.parseAsEchartsPieOptions(list, JSON.parse(this.echartConfig))
                    } else if (this.showType=='circle') {
                        option = this.parseAsEchartsPieOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.radius='50%'
                            delete e.roseType
                            delete e.itemStyle
                        })
                    } else if(this.showType=='bar') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.type='bar'
                        })
                    } else if(this.showType=='barPolar') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.type='bar'
                            e.coordinateSystem= 'polar'
                        })
                        option=Object.assign(option,{
                            polar: {
                                radius: [30, '80%']
                            },
                            angleAxis: {
                                startAngle: 75
                            },
                            radiusAxis: {
                                type: 'category',
                                data: option.xAxis.data
                            },
                        })
                        delete option.xAxis
                        delete option.yAxis
                    } else if(this.showType=='barStack') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.type='bar'
                            e.stack='total'
                        })
                    } else if(this.showType=='barPolarStack') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.type='bar'
                            e.stack='total'
                            e.coordinateSystem= 'polar'
                        })
                        option=Object.assign(option,{
                            polar: {
                                radius: [30, '80%']
                            },
                            angleAxis: {
                                startAngle: 75
                            },
                            radiusAxis: {
                                type: 'category',
                                data: option.xAxis.data
                            },
                        })
                        delete option.xAxis
                        delete option.yAxis
                    } else if(this.showType=='line') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                    } else if(this.showType=='lineArea') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.type='line'
                            e.areaStyle= {}
                        })
                    } else if(this.showType=='lineStack') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.type='line'
                            e.stack= 'Total'
                        })
                    } else if(this.showType=='lineStackArea') {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                        option.series.forEach(e=>{
                            e.type='line'
                            e.stack= 'Total'
                            e.areaStyle= {}
                            e.emphasis= {
                                focus: 'series'
                            }
                        })
                    } else {
                        option = this.parseAsEchartsLineOptions(list, JSON.parse(this.echartConfig))
                    }
                    this.setEchartsOption(domId, option, null, true)

                    let json = JSON.stringify(this.$data, null, '    ')
                    localStorage.setItem('data-viewer', json)
                }
            }
        }
    })

    function RegistryEchatsCustomTheme(echarts) {

        let theme = {
            "color": [
                "#3060fb",
                "#24ef95",
                "#ffb60f",
                "#f17435",
                "#7db0e7",
                "#75efdd"
            ],
            "backgroundColor": "rgba(252,252,252,0)",
            "textStyle": {},
            "title": {
                "textStyle": {
                    "color": "#555555"
                },
                "subtextStyle": {
                    "color": "#999999"
                }
            },
            "line": {
                "itemStyle": {
                    "borderWidth": "2"
                },
                "lineStyle": {
                    "width": "3"
                },
                "symbolSize": "8",
                "symbol": "emptyCircle",
                "smooth": false
            },
            "radar": {
                "itemStyle": {
                    "borderWidth": "2"
                },
                "lineStyle": {
                    "width": "3"
                },
                "symbolSize": "8",
                "symbol": "emptyCircle",
                "smooth": false
            },
            "bar": {
                "itemStyle": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                }
            },
            "pie": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "scatter": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "boxplot": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "parallel": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "sankey": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "funnel": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "gauge": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "candlestick": {
                "itemStyle": {
                    "color": "rgba(0,0,0,0)",
                    "color0": "transparent",
                    "borderColor": "#ff0000",
                    "borderColor0": "#29b232",
                    "borderWidth": "2"
                }
            },
            "graph": {
                "itemStyle": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "lineStyle": {
                    "width": "1",
                    "color": "#bbb9b9"
                },
                "symbolSize": "8",
                "symbol": "emptyCircle",
                "smooth": false,
                "color": [
                    "#3060fb",
                    "#24ef95",
                    "#ffb60f",
                    "#f17435",
                    "#7db0e7",
                    "#75efdd"
                ],
                "label": {
                    "color": "#ffffff"
                }
            },
            "map": {
                "itemStyle": {
                    "areaColor": "#eeeeee",
                    "borderColor": "#aaaaaa",
                    "borderWidth": 0.5
                },
                "label": {
                    "color": "#ffffff"
                },
                "emphasis": {
                    "itemStyle": {
                        "areaColor": "rgba(63,177,227,0.25)",
                        "borderColor": "#3fb1e3",
                        "borderWidth": 1
                    },
                    "label": {
                        "color": "#3fb1e3"
                    }
                }
            },
            "geo": {
                "itemStyle": {
                    "areaColor": "#eeeeee",
                    "borderColor": "#aaaaaa",
                    "borderWidth": 0.5
                },
                "label": {
                    "color": "#ffffff"
                },
                "emphasis": {
                    "itemStyle": {
                        "areaColor": "rgba(63,177,227,0.25)",
                        "borderColor": "#3fb1e3",
                        "borderWidth": 1
                    },
                    "label": {
                        "color": "#3fb1e3"
                    }
                }
            },
            "categoryAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "valueAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "logAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "timeAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "color": "#787878"
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "toolbox": {
                "iconStyle": {
                    "borderColor": "#999999"
                },
                "emphasis": {
                    "iconStyle": {
                        "borderColor": "#666666"
                    }
                }
            },
            "legend": {
                "textStyle": {
                    "color": "#696969"
                }
            },
            "tooltip": {
                "axisPointer": {
                    "lineStyle": {
                        "color": "#a4a4a4",
                        "width": 1
                    },
                    "crossStyle": {
                        "color": "#a4a4a4",
                        "width": 1
                    }
                }
            },
            "timeline": {
                "lineStyle": {
                    "color": "#bfbfbf",
                    "width": 1
                },
                "itemStyle": {
                    "color": "#94a0b2",
                    "borderWidth": 1
                },
                "controlStyle": {
                    "color": "#c4c4c4",
                    "borderColor": "#c4c4c4",
                    "borderWidth": 0.5
                },
                "checkpointStyle": {
                    "color": "#2e5fff",
                    "borderColor": "#47bbf4"
                },
                "label": {
                    "color": "#595959"
                },
                "emphasis": {
                    "itemStyle": {
                        "color": "#6a8cf7"
                    },
                    "controlStyle": {
                        "color": "#c4c4c4",
                        "borderColor": "#c4c4c4",
                        "borderWidth": 0.5
                    },
                    "label": {
                        "color": "#595959"
                    }
                }
            },
            "visualMap": {
                "color": [
                    "#ff0000",
                    "#ff8400",
                    "#ffd100",
                    "#bffbde",
                    "#63c5ff",
                    "#969ffe",
                    "#897fdf"
                ]
            },
            "dataZoom": {
                "backgroundColor": "rgba(255,255,255,0)",
                "dataBackgroundColor": "rgba(222,222,222,1)",
                "fillerColor": "rgba(114,230,212,0.25)",
                "handleColor": "#cccccc",
                "handleSize": "100%",
                "textStyle": {
                    "color": "#999999"
                }
            },
            "markPoint": {
                "label": {
                    "color": "#ffffff"
                },
                "emphasis": {
                    "label": {
                        "color": "#ffffff"
                    }
                }
            }
        }

        echarts.registerTheme('custom', theme);
    }
</script>
</html>